<template>
	<view class="container">

		<up-sticky bgColor="#fff">
			<view class="subsection">
				<u-subsection :list="tabList" :current="currentTab" @change="sectionChange" activeColor="#1890ff"
					bgColor="#F3F3F3" inactiveColor="#75838E" fontSize="15px" bold height="72" :animation="true"
					buttonColor="#1890ff" />
			</view>
			<view class="list-search">
				<u-search placeholder="请输入设备名称/编号" v-model="searchData.deviceName" searchIcon="scan"
					@search="getDataList()" @clickIcon="onScan" :showAction="false" shape="round" height="36"
					bgColor="#fff" placeholderColor="#999" searchIconColor="#252B93" color="#333" />
			</view>
		</up-sticky>

		<view>
			<u-empty v-if="taskList.length === 0" mode="search">
			</u-empty>
		</view>

		<view class="task-list">
			<up-list @scrolltolower="scrolltolower" enableFlex>
				<up-list-item class="task-item" v-for="(item, index) in taskList" :key="index">
					<view class="task-info" @click="goToDetail(item.id,item.whichworhshop)">
						<u-row justify="space-between">
							<u-col span="12">
								<view class="card-title">
									<text>{{ item.sbmc || "暂无数据" }} </text>
								</view>
							</u-col>

						</u-row>

						<u-row>
							<u-col span="12">
								<view class="card-value">
									<text>设备编号:{{ item.sbbh || " " }} </text>
								</view>
							</u-col>
						</u-row>

						<u-row>
							<u-col span="12">
								<view class="card-value">
									<text>故障单号:{{ item.ldbh || " " }} </text>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="12">
								<view class="card-value">
									<text>设备区域:{{ item.whichworhshop || " " }} </text>
								</view>
							</u-col>
						</u-row>

						<u-row>
							<u-col span="12">
								<view class="card-value">
									<text>故障时间:{{ item.formatdate }} {{item.faulttime}} </text>
								</view>
							</u-col>
						</u-row>

					</view>

					<view class="card-tag">
						<u-tag :text=getStatusText(item) plain size="medium" :type="getType(item)"></u-tag>
					</view>


				</up-list-item>
			</up-list>
		</view>

	</view>
	<view class="u-float-button-con">
		<u-float-button class="u-float-button" :isMenu="false" bottom="160rpx" @click="addGzjl">
		</u-float-button>
	</view>
</template>
<script>
	import UpCard from "../../../uni_modules/uview-plus/components/u-card/u-card.vue";

	export default {
		name: "index",
		components: {
			UpCard
		},
		mounted() {
			//获取传递函数，执行更新方法
			uni.$on('update', function(data) {
				console.log("成功触发了更新")
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('update');
		},

		data() {
			return {
				searchData: {
					status: '',
					deviceName: '',
					dept: '',
					abc: '',
					starttime: '',
					endtime: '',
				},
				pagination: {
					pageNum: 1, // 当前页码
					pageSize: 20, // 每页条数
					total: 0, // 总条数
				},
				tabList: ['全部', '待确认', '待审核', '已完成'],
				currentTab: 0,
				taskList: [],
			};

		},
		onShow() {
			this.taskList = []
			this.searchData.pageNum = 1
			this.getDataList();
		},

		watch: {
			searchData() { // 当搜索条件变化时重新加载列表
				this.getDataList();
			}
		},
		methods: {
			async getDataList() {
				const currentParams = {
					status: this.searchData.status,
					deviceName: this.searchData.deviceName,
				}
				// 如果搜索条件变化，重置分页
				if (JSON.stringify(currentParams) !== JSON.stringify(this.searchParams)) {
					this.pagination.pageNum = 1;
					this.taskList = [];
				}
				this.searchParams = {
					...currentParams
				};
				const params = {
					...currentParams,
					pageNum: this.pagination.pageNum,
					pageSize: this.pagination.pageSize
				};
				this.$commonUnits.postRequest(
					"deviceFaultRecord.deviceFaultRecord.getFaultRecordList.mobile",
					params
				).then(res => {
					if (!res.result || res.result.length === 0) {
						this.taskList = [];
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					} else {
						const newData = res.result.list;
						this.pagination.total = res.result.total;
						if (this.pagination.pageNum === 1) {
							this.taskList = newData;
						} else {
							this.taskList = [...this.taskList, ...newData];
						}
					}
				}).catch(err => {
					this.taskList = [];
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
					console.error('加载故障记录失败:', error);
					// 重置页码
					if (this.pagination.pageNum > 1) {
						this.pagination.pageNum--;
					}
				});
			},

			//底部触发
			scrolltolower() {
				// 如果已经加载完所有数据，不再请求
				if (this.taskList.length >= this.pagination.total) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
					return;
				}
				this.pagination.pageNum++;
				this.getDataList();
			},

			//状态切换事件
			sectionChange(e) {
				this.searchData.status = e
				this.pagination.pageNum = 1
				this.getDataList();
			},

			addGzjl() {
				uni.navigateTo({
					url: `/pagesOne/pages/fault/detail?mode=add`
				});
			},

			goToDetail(id, whichworhshop) {
				uni.navigateTo({
					url: `/pagesOne/pages/fault/detail?mode=details&id=${id}&sbcq=${whichworhshop}`
				});
			},
			formatTime(timeStr) {
				if (!timeStr) return '';
				return timeStr.substring(0, 10);
			},
			// 获取状态文本
			getStatusText(item) {
				switch (item.status) {
					case '1':
						return '待确认';
					case '2':
						return '待审核';
					case '3':
						return '已完成';
					default:
						return '待确认';
				}
			},

			// 获取状态文本
			getType(item) {
				switch (item.status) {
					case '1':
						return 'primary';
					case '2':
						return 'info';
					case '3':
						return 'success';
					default:
						return 'primary';
				}
			},

			onScan() {
				uni.scanCode({
					success: (res) => {
						this.setData({
							"searchData": res.result
						})
					}
				});
			}
		}
	}
</script>
<style lang='scss' scoped>
	.container {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.list-search {
		padding-top: 10px;
		background-color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(2rpx);
		}

		:deep(.u-search__content) {
			border-radius: 50rpx !important;
			border: 2rpx solid #1890ff !important;
			box-shadow: 0 2rpx 8rpx rgba(37, 43, 147, 0.1);
			border: 1rpx solid #eee;

			&:focus-within {
				border-color: #1890ff !important;
				box-shadow: 0 2rpx 12rpx rgba(37, 43, 147, 0.2);
			}
		}

		:deep(.u-search__content__input) {
			font-size: 14px;
			padding-left: 20rpx;
		}

		:deep(.u-icon__icon) {
			font-size: 18px !important;
		}
	}

	/* 任务列表样式 */
	.task-list {
		padding: 20rpx;
	}

	.task-item {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
</style>